<template>
  <div>


    <el-table :data="results"  empty-text="无数据">
      <!--<template slot="empty">-->
      <!--<span>加载中...</span>-->
    <!--</template>-->

      <el-table-column
        prop="id"
        label="id"
      ></el-table-column>
      <el-table-column
        prop="executeTime"
        label="执行时间"
      ></el-table-column>
      <el-table-column
        prop="diffCount"
        label="不同数据量"
      ></el-table-column>

      <el-table-column
        prop="srcTotal"
        label="源数据量"
      ></el-table-column>

      <el-table-column
        prop="destTotal"
        label="目标数据量"
      ></el-table-column>

      <el-table-column
        prop="comment"
        label="备注"
      ></el-table-column>

      <el-table-column>
          <template slot-scope="{row,index}">
          <!--      <el-button type="primary" size="mini" @click="updateFlag(row,index)" >修改</el-button>-->
          <el-button type="primary" size="mini" @click="getDetail(row,index)" >查看详细</el-button>
        </template>

      </el-table-column>

    </el-table>

    <el-dialog
      title="详细信息"
      :visible.sync="detailVisible"
      width="70%"
      >
      <p>比对结果:{{result.diffCount?'比对不通过':'比对通过'}}</p>
      <p>不同数量:{{result.diffCount}}</p>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>源sql,结果数量:{{result.srcTotal}}</span>
        </div>
        {{result.srcSql}}
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>目标sql,结果数量:{{result.destTotal}}</span>
        </div>
        {{result.destSql}}
      </el-card>


      <el-table :data="detailResult" empty-text="比对通过，无错误数据">



        <el-table-column
          prop="srcResult"
          label="源结果"
        ></el-table-column>

        <el-table-column
          prop="destResult"
          label="目标结果"
        ></el-table-column>



      </el-table>






      <span slot="footer" class="dialog-footer">
    <el-button @click="detailVisible = false">关闭</el-button>

  </span>
    </el-dialog>


  </div>

</template>

<script>

  import {getResultsByTask,getDetailResult,deleteTask} from '../../api/shuzhiCompare'

    export default {
        name: "result",


      beforeRouteLeave (to, from, next) {
        console.log("beforeroute")
        if (this.$store.getters.tempTaskFlag) {
          this.$store.dispatch("setTempTaskFlag",false)
          this.$confirm('是否保存此任务?', '提示', {
            confirmButtonText: '保存',
            cancelButtonText: '不保存',
            type: 'warning'
          }).then(() => {



            this.$message({
              type: 'success',
              message: '保存成功!'
            });
            next()
          }).catch(() => {
            deleteTask(this.$store.getters.tempTaskNo)
            this.$message({
              type: 'info',
              message: '已取消保存'
            });
            next()
          });



        } else {
          next()
        }
      },
      data(){
          return{
            detailVisible:false,
            taskid:0,
            results:[],
            result:{},
            detailResult:[]
          }
      },



      methods:{


        verifyTaskid(){
         let taskid =  this.$store.getters.selectedTaskId
          console.log("=========taskid")
          this.taskid = taskid
          if (taskid == 0){
            this.$router.push("/sycompare/tasks")
            return
          }
          console.log(taskid)
          this.getResults()
        },

        getResults(){
          getResultsByTask(this.taskid).then(res=>{
            this.results = res.data
          })
        },

        getDetail(row){
          this.detailVisible = true
          getDetailResult(row.id).then(res=>{
            this.result = row
            this.detailResult = res.data

          })
        }

      },
      created(){
        this.verifyTaskid()
      }



    }
</script>

<style scoped>
  .set-eltree-textsize >>> .el-tree-node__label {
    font-size: 20px;
  }


  .set-aside >>>  .el-aside {
    padding: 20px;
    overflow: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-top: 40px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  /*.clearfix{*/
    /*clear: both;*/
  /*}*/

  .box-card {
    width: 48%;
    float: left;
  }

</style>
